<template>
  <div class="edit-work-experience-content">
    <el-form label-position="top" v-loading="formLoading" :model="form" :rules="rules" ref="form">
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请填写公司名称" maxlength="255"></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位名称" prop="postName">
            <el-input v-model="form.postName" placeholder="请填写职位名称" maxlength="255"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="在职时间" prop="workTimeStart">
            <el-col :span="11">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="form.workTimeStart"
                  type="date"
                  placement="bottom-start"
                  :picker-options="{disabledDate:(time)=>{
                    return time.getTime()>new Date().getTime();
                  }}"
                  placeholder="请选择开始时间">
              </el-date-picker>
            </el-col>
            <el-col style="text-align: center" :span="1">-</el-col>
            <el-col :span="11">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  v-model="form.workTimeEnd"
                  type="date"
                  placement="bottom-start"
                  :picker-options="{disabledDate}"
                  placeholder="请选择结束时间">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属行业" prop="industry">
            <el-cascader v-model="form.industry" :options="industryList" :props="optionProps2" :show-all-levels="false" style="width: 350px"></el-cascader>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="职位类别" prop="postType">
            <el-cascader v-model="form.postType" :options="category" :props="optionProps" :show-all-levels="false" v-loading="categoryLoading"></el-cascader>
            <div class="iconfont icon-xuanzeqixiayige_o"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="职责业绩" prop="duty">
            <el-input
                v-model="form.duty"
                maxlength="500"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8}"
                placeholder="请填写您的职责业绩，90%的招牌方会通过职责业绩了解您的工作能力进而决定面试几率。">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="工作内容" prop="workExplain">
            <el-input
                maxlength="500"
                v-model="form.workExplain"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8}"
                placeholder="请填写您的工作内容，90%的招牌方会通过工作内容了解您的工作能力进而决定面试几率。">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getIndustry as getIndustryApi, getIndustryAllApi, getJobCategory as getJobCategoryApi} from "@/api/config";
import {submitWorkExp,getWorkExp} from "@/api/mineCenter";

export default {
  name: "WorkExperience",
  emits: ['refresh'],
  data() {
    return {
      industryLoading:false,
      industry:[],
      //期望职位选择项配置
      categoryLoading:false,
      category: [],
      industryList: [],
      //期望职位级联选择器配置
      optionProps: {
        value: 'id',
        label: 'jobTitle',
        children: 'subLevelModelList',
      },
      optionProps2: {
        value: 'industryCode',
        label: 'industryName',
        children: 'sonList',
      },
      formLoading:false,
      form: {
        companyName:'',
        shield:false,
        postName:'',
        workTimeStart:'',
        workTimeEnd:'',
        industry:null,
        postType:null,
        id: 0,
        duty:'',
        workExplain:'',
      },
      rules: {
        companyName: [
          {required: true, message: '请输入公司名称', trigger: 'blur'},
        ],
        postName: [
          {required: true, message: '请填写职位名称', trigger: 'blur'}
        ],
        workTimeStart: [
          {required: true, message: '请选择任职时间', trigger: 'blur'}
        ],
        industry: [
          {required: true, message: '请选择所属行业', trigger: 'blur'}
        ],
        postType: [
          {required: true, message: '请选择职位类别', trigger: 'blur'}
        ],
        duty: [
          {required: true, message: '请填写职责业绩', trigger: 'blur'}
        ],
        workExplain: [
          {required: true, message: '请填写工作内容', trigger: 'blur'}
        ],
      },
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.formLoading){
            this.$message.warning('请等待加载完成');
            return;
          }
          if(!this.form.workTimeEnd){
            this.$message.error('请选择结束时间');
            return;
          }
          let form=JSON.parse(JSON.stringify(this.form));
          if(typeof form.postType==='object'){
            form.postType=form.postType[2];
          }
          form.shield=form.shield?1:2;
          const loading=this.$loading({text:'提交中'})
          console.log(this.form.industry[3])
          form.industry = this.form.industry[3]
          submitWorkExp(form).then(()=>{
            this.$message.success('保存成功');
            this.$emit('refresh',2)
          }).finally(()=>{
            loading.close()
          })
        }
      })
    },
    getIndustry(){
      this.industryLoading=true;
      getIndustryAllApi().then((res)=>{
        this.industryList=res
      }).finally(()=>{
        this.industryLoading=false
      })
    },
    disabledDate(time){
      if(this.form.workTimeStart){
        return time.getTime()<new Date(this.form.workTimeStart).getTime()||time.getTime()>new Date().getTime();
      }else{
        return time.getTime()>new Date().getTime()
      }
    },
    //获取职位类别
    getJobCategory(){
      this.categoryLoading=true
      getJobCategoryApi({}).then((res)=>{
        this.category=res;
      }).finally(()=>{
        this.categoryLoading=false
      })
    },
    getDetail(id){
      this.formLoading=true
      getWorkExp({id}).then((res)=>{
        res.shield=res.shield === 1;
        this.form=res;
      }).finally(()=>{
        this.formLoading=false;
      }).catch(()=>{
        this.$emit('refresh',2);
      })
    }
  },
  mounted() {
    this.getIndustry();
    this.getJobCategory();
  }
}
</script>

<style lang="scss" scoped>
.edit-work-experience-content {
  padding: 0 60px;
  max-height: 650px;
  overflow-y: scroll;
  .el-date-editor, .el-select {
    width: 100%;
  }

  .el-form-item__content {
    position: relative;
  }

  .iconfont {
    color: $darkGray;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    width: 30px;
    transform: translate(-50%, -50%);
    top: 50%;
    right: -15px;
    cursor: pointer;
  }
}
</style>
